<template>
  <h3>我是App组件{{name}}--{{price}}</h3>
</template>

<script>
import { reactive, ref, toRefs, readonly, isRef, isReactive, isReadonly, isProxy } from 'vue';
export default {
  name: 'App',
  components: {
  },
  setup() {
    let car = reactive({
      name: 'benz',
      price: '40w',
    })

    let sum = ref(0)

    let car2 = readonly(car)

    //响应式数据的判断
    console.log('isRef', isRef(sum)) //判断是否是ref创建的数据
    console.log('isReactive', isReactive(car)) //判断是否是reactive创建的数据
    console.log('isReadonly', isReadonly(car2)) //判断实部是readonly创建的数据
    console.log('isProxy', isProxy(car2)) //判断是否是reactive或readonly创建的数据

    return {
      ...toRefs(car),
    }
  }
}
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>
